<template>
    <div class="sidebar">
        <el-menu  class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse"
                 unique-opened router >
            <!--background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff"-->
            <template :model="items" v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
                                    {{ threeItem.title }}
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subItem.index" :key="subItem.index">
                                {{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
    import bus from '../common/bus';
    export default {
        data() {
            return {
                url: this.GLOBAL.url,
                // url:"/api",
                collapse: false,
                lastitems: [],
                // taximetermgmt:{
                //         icon: 'el-icon-lx-home',
                //         index: 'taximetermgmt',
                //         title: '车辆管理'
                //     },
                // paramfilemgmt: {
                //         icon: 'el-icon-lx-home',
                //         index: 'paramfilemgmt',
                //         title: '计价器参数文件管理'
                //     },
                // check: {
                //     icon: 'el-icon-lx-home',
                //     index: 'check',
                //     title: '审核'
                // },
                // search: {
                //     icon: 'el-icon-lx-home',
                //     index: 'search',
                //     title: '查询'
                // },
                items: [
                    // {
                    //     icon: 'el-icon-lx-home',
                    //     index: 'taximetermgmt',
                    //     title: '车辆管理'
                    // }
                    // {
                    //     icon: 'el-icon-lx-home',
                    //     index: 'paramfilemgmt',
                    //     title: '计价器参数文件管理'
                    // },
                    // {
                    //     icon: 'el-icon-lx-home',
                    //     index: 'check',
                    //     title: '审核'
                    // },
                    // {
                    //     icon: 'el-icon-lx-home',
                    //     index: 'search',
                    //     title: '查询'
                    // },
                    // {
                    //     icon: 'el-icon-lx-home',
                    //     index: 'dashboard',
                    //     title: '系统首页'
                    // },
                    //
                    // {
                    //     icon: 'el-icon-lx-home',
                    //     index: 'dashboard',
                    //     title: '安全管理'
                    // },
                    // {
                    //     icon: 'el-icon-lx-home',
                    //     index: 'dashboard',
                    //     title: '审核'
                    // },
                    // {
                    //     icon: 'el-icon-lx-cascades',
                    //     index: 'table',
                    //     title: '查询'
                    // },
                    // {
                    //     icon: 'el-icon-lx-copy',
                    //     index: 'tabs',
                    //     title: 'tab选项卡'
                    // },
                    // {
                    //     icon: 'el-icon-lx-calendar',
                    //     index: '3',
                    //     title: '表单相关',
                    //     subs: [
                    //         {
                    //             index: 'form',
                    //             title: '基本表单'
                    //         },
                    //         {
                    //             index: '3-2',
                    //             title: '三级菜单',
                    //             subs: [
                    //                 {
                    //                     index: 'editor',
                    //                     title: '富文本编辑器'
                    //                 },
                    //                 {
                    //                     index: 'markdown',
                    //                     title: 'markdown编辑器'
                    //                 },
                    //             ]
                    //         },
                    //         {
                    //             index: 'upload',
                    //             title: '文件上传'
                    //         }
                    //     ]
                    // },
                    // {
                    //     icon: 'el-icon-lx-emoji',
                    //     index: 'icon',
                    //     title: '自定义图标'
                    // },
                    // {
                    //     icon: 'el-icon-lx-emoji',
                    //     index: 'charts',
                    //     title: 'schart图表'
                    // },
                    // {
                    //     icon: 'el-icon-rank',
                    //     index: '6',
                    //     title: '拖拽组件',
                    //     subs: [
                    //         {
                    //             index: 'drag',
                    //             title: '拖拽列表',
                    //         },
                    //         {
                    //             index: 'dialog',
                    //             title: '拖拽弹框',
                    //         }
                    //     ]
                    // },
                    // {
                    //     icon: 'el-icon-lx-global',
                    //     index: 'i18n',
                    //     title: '国际化功能'
                    // },
                    // {
                    //     icon: 'el-icon-lx-warn',
                    //     index: '7',
                    //     title: '错误处理',
                    //     subs: [
                    //         {
                    //             index: 'permission',
                    //             title: '权限测试'
                    //         },
                    //         {
                    //             index: '404',
                    //             title: '404页面'
                    //         }
                    //     ]
                    // }
                ]
            }
        },
        computed: {
            onRoutes() {
                return this.$route.path.replace('/', '');
            }
        },
        created() {
            this.getRole();
            this.items = this.getRole();
            // 通过 Event Bus 进行组件间通信，来折叠侧边栏
            bus.$on('collapse', msg => {
                this.collapse = msg;
            })
        },
        methods: {
            getRole(){

                let role = [];
                let lastitems = [];
                this.$axios({
                    method: 'post',
                    url: this.url+'/user/userinfopriv'
                }).then((res) => {
                    role = res.data;
                    console.log(role);
                    role.forEach(function (item, index) {
                        if (item.privilegeid == 1) {
                            lastitems.push({
                                icon: 'el-icon-lx-global',
                                index: 'taximetermgmt',
                                title: '车辆管理',
                                id: 2
                            });
                        } else if (item.privilegeid == 2) {
                            lastitems.push({
                                icon: 'el-icon-lx-punch',
                                index: 'paramfilemgmt',
                                title: '计价器参数文件管理',
                                id: 3
                            });
                        } else if (item.privilegeid == 4) {
                            lastitems.push({
                                icon: 'el-icon-lx-roundcheck',
                                index: 'check',
                                title: '审核',
                                id: 4
                            });
                        } else if (item.privilegeid == 8) {
                            lastitems.push({
                                icon: 'el-icon-lx-search',
                                index: '3',
                                title: '查询',
                                subs: [],
                                id: 5
                            });
                        }
                        // else if(item.privilegeid == 11){
                        //     lastitems.push({
                        //         icon: 'el-icon-lx-home',
                        //         index: 'user',
                        //         title: '用户管理'
                        //     });
                        // }else if(item.privilegeid == 12){
                        //     lastitems.push({
                        //         icon: 'el-icon-lx-home',
                        //         index: 'role',
                        //         title: '角色管理'
                        //     });
                        // }
                        else if (item.privilegeid == 13) {
                            lastitems.unshift({
                                icon: 'el-icon-lx-calendar',
                                index: '6',
                                title: '基础数据管理',
                                subs: [],
                                id: 1
                            });
                        }
                    });
                    sortByKey(lastitems, 'id');

                    console.log(lastitems)


                    if (lastitems[lastitems.length-1].title == '查询') {
                        role.forEach(function (item, index) {
                            if (item.privilegeid == 9) {
                                lastitems[lastitems.length-1].subs.unshift({
                                    icon: 'el-icon-lx-home',
                                    index: 'search',
                                    title: '查询计价器内版本号',
                                });
                            } else if (item.privilegeid == 10) {
                                lastitems[lastitems.length-1].subs.push({
                                    icon: 'el-icon-lx-home',
                                    index: 'searchfile',
                                    title: '查询升级文件',
                                });
                            }
                        });


                    }

                    if (lastitems[0].title == '基础数据管理') {
                        role.forEach(function (item, index) {
                            if (item.privilegeid == 14) {
                                lastitems[0].subs.push({
                                    icon: 'el-icon-lx-home',
                                    index: 'fact',
                                    title: '计价器厂商管理',
                                    id: 2
                                });
                            } else if (item.privilegeid == 15) {
                                lastitems[0].subs.unshift({
                                    icon: 'el-icon-lx-home',
                                    index: 'company',
                                    title: '出租车公司管理',
                                    id: 1
                                });
                            } else if (item.privilegeid == 16) {
                                lastitems[0].subs.push({
                                    icon: 'el-icon-lx-home',
                                    index: 'taximetertype',
                                    title: '计价器类型',
                                    id: 3
                                });
                            } else if (item.privilegeid == 17) {
                                lastitems[0].subs.push({
                                    icon: 'el-icon-lx-home',
                                    index: 'pricetype',
                                    title: '价格类型管理',
                                    id: 4
                                });
                            }
                            else if (item.privilegeid == 11) {
                                lastitems[0].subs.push({
                                    icon: 'el-icon-lx-home',
                                    index: 'user',
                                    title: '用户管理',
                                    id: 5
                                });
                            } else if (item.privilegeid == 12) {
                                lastitems[0].subs.push({
                                    icon: 'el-icon-lx-home',
                                    index: 'role',
                                    title: '角色管理',
                                    id: 6
                                });
                            }
                        });

                        sortByKey(lastitems[0].subs, 'id');

                    }
                    console.log(lastitems);

                })

                return lastitems;

            }
        }
    }

            //数组对象方法排序:
            function sortByKey(array,key){
                return array.sort(function(a,b){
                    var x=a[key];
                    var y=b[key];
                    return ((x<y)?-1:((x>y)?1:0));
                });
            }



    // import axios from 'axios';
    // import Golbal from '../../api/globalpara';
    // function getRole(){
    //
    //     let role =[];
    //     let lastitems=[];
    //     axios({
    //         method: 'post',
    //         url:'/api/user/userinfopriv'
    //     }).then((res) => {
    //         role = res.data;
    //         console.log(role);
    //         role.forEach(function (item, index) {
    //                 if(item.privilegeid == 1){
    //                     lastitems.push({
    //                         icon: 'el-icon-lx-global',
    //                         index: 'taximetermgmt',
    //                         title: '车辆管理',
    //                         id:2
    //                     });
    //                 }else if(item.privilegeid == 2){
    //                     lastitems.push({
    //                        icon: 'el-icon-lx-punch',
    //                        index: 'paramfilemgmt',
    //                        title: '计价器参数文件管理',
    //                        id:3
    //                    });
    //                 }else if(item.privilegeid == 4){
    //                     lastitems.push({
    //                         icon: 'el-icon-lx-roundcheck',
    //                         index: 'check',
    //                         title: '审核',
    //                         id:4
    //                     });
    //                 }else if(item.privilegeid == 8){
    //                     lastitems.unshift({
    //                         icon: 'el-icon-lx-search',
    //                         index: '3',
    //                         title: '查询',
    //                         subs:[],
    //                         id:5
    //                     });
    //                 }
    //                 // else if(item.privilegeid == 11){
    //                 //     lastitems.push({
    //                 //         icon: 'el-icon-lx-home',
    //                 //         index: 'user',
    //                 //         title: '用户管理'
    //                 //     });
    //                 // }else if(item.privilegeid == 12){
    //                 //     lastitems.push({
    //                 //         icon: 'el-icon-lx-home',
    //                 //         index: 'role',
    //                 //         title: '角色管理'
    //                 //     });
    //                 // }
    //                 else if(item.privilegeid == 13){
    //                     lastitems.unshift({
    //                         icon: 'el-icon-lx-calendar',
    //                         index: '6',
    //                         title: '基础数据管理',
    //                         subs:[],
    //                         id:1
    //                     });
    //                 }
    //             });
    //         sortByKey(lastitems,'id');
    //
    //
    //         if (lastitems[4].title=='查询'){
    //             role.forEach(function (item, index) {
    //                 if(item.privilegeid == 9){
    //                     lastitems[4].subs.unshift({
    //                         icon: 'el-icon-lx-home',
    //                         index: 'search',
    //                         title: '查询计价器内版本号',
    //                     });
    //                 }else if(item.privilegeid == 10){
    //                     lastitems[4].subs.push({
    //                         icon: 'el-icon-lx-home',
    //                         index: 'searchfile',
    //                         title: '查询升级文件',
    //                     });
    //                 }
    //             });
    //
    //
    //         }
    //
    //        if (lastitems[0].title=='基础数据管理'){
    //            role.forEach(function (item, index) {
    //                if(item.privilegeid == 14){
    //                    lastitems[0].subs.push({
    //                        icon: 'el-icon-lx-home',
    //                        index: 'fact',
    //                        title: '计价器厂商管理',
    //                        id:2
    //                    });
    //                }else if(item.privilegeid == 15){
    //                    lastitems[0].subs.unshift({
    //                        icon: 'el-icon-lx-home',
    //                        index: 'company',
    //                        title: '出租车公司管理',
    //                        id:1
    //                    });
    //                }else if(item.privilegeid == 16){
    //                    lastitems[0].subs.push({
    //                        icon: 'el-icon-lx-home',
    //                        index: 'taximetertype',
    //                        title: '计价器类型',
    //                        id:3
    //                    });
    //                }else if(item.privilegeid == 17){
    //                    lastitems[0].subs.push({
    //                        icon: 'el-icon-lx-home',
    //                        index: 'pricetype',
    //                        title: '价格类型管理',
    //                        id:4
    //                    });
    //                }
    //                else if(item.privilegeid == 11){
    //                    lastitems[0].subs.push({
    //                        icon: 'el-icon-lx-home',
    //                        index: 'user',
    //                        title: '用户管理',
    //                        id:5
    //                    });
    //                }else if(item.privilegeid == 12){
    //                    lastitems[0].subs.push({
    //                        icon: 'el-icon-lx-home',
    //                        index: 'role',
    //                        title: '角色管理',
    //                        id:6
    //                    });
    //                }
    //            });
    //
    //            sortByKey(lastitems[0].subs,'id');
    //
    //        }
    //         console.log(lastitems);
    //
    //     })
    //
    //     return lastitems;
    //
    // }
    //
    // //数组对象方法排序:
    // function sortByKey(array,key){
    //     return array.sort(function(a,b){
    //         var x=a[key];
    //         var y=b[key];
    //         return ((x<y)?-1:((x>y)?1:0));
    //     });
    // }

</script>

<style scoped>
    .sidebar{
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom:0;
        overflow-y: scroll;
    }
    .sidebar::-webkit-scrollbar{
        width: 0;
    }
    .sidebar-el-menu:not(.el-menu--collapse){
        width: 250px;
    }
    .sidebar > ul {
        height:100%;
    }
</style>
